<template>
  <view class="layout" :style="{ paddingTop: safeAreaTop + 'px' }">
    <!-- 自定义顶部导航栏 -->
    <CustomNavBar :title="navTitle" :show-back="showBack">
      <template #right>
        <slot name="nav-right"></slot>
      </template>
    </CustomNavBar>

    <!-- 内容区域 -->
    <view
      class="content"
      :style="{
        paddingTop: showNavBar ? 'calc(88rpx + env(safe-area-inset-top))' : '0',
        paddingBottom: showTabBar ? '120rpx' : '0',
      }"
    >
      <slot></slot>
    </view>

    <!-- 自定义底部导航 -->
    <CustomTabBar v-if="showTabBar" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CustomTabBar from './CustomTabBar.vue'
import CustomNavBar from './CustomNavBar.vue'

const safeAreaTop = ref(0)
onMounted(() => {
  let safeAreaInsets
  if (uni.getWindowInfo) {
    safeAreaInsets = uni.getWindowInfo().safeAreaInsets
  } else {
    safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
  }
  safeAreaTop.value = safeAreaInsets?.top || 0
})

interface Props {
  showTabBar?: boolean
  showNavBar?: boolean
  navTitle?: string
  showBack?: boolean
}

withDefaults(defineProps<Props>(), {
  showTabBar: true,
  showNavBar: true,
  navTitle: '页面标题',
  showBack: false,
})
</script>

<style scoped>
.layout {
  min-height: 100vh;
  background: #f5f5f5;
}

.content {
  min-height: 100vh;
}
</style>
